<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            background: #333;
        }
        .container{
            height:560px;
            width:400px;
            margin:0 auto;
        }
        .box{
            width:300px;
        }
        #title,#bottom{
            height:30px;
            background:#000;
            line-height:30px;
            text-align: center;
            color:#fff;
        }
        img{
            width:300px;
            height:400px;
            vertical-align: middle;
        }
        ul{
            margin:0;
            padding:0;
            list-style: none;
        }
        .clear{
            zoom:1;
        }
        .clear:after{
            content: ' ';
            display:block;
            clear:both;
        }
        li{
            float:left;
            width:40px;
            height:40px;
            background:#666;
            margin-right: 4px;
            cursor: pointer;
            border:2px solid #ddd;
            border-radius: 5px;
            transition:border 1s;
        }
        li img{
            width:100%;
            height:100%;
        }
        li.active{
            border:2px solid #ffcc33;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div id="title">加载中。。。</div>
            <div>
                <img src="imgs/1.jpg"/>
            </div>
            <div id="bottom"></div>
        </div>
        <ul class="clear"></ul>
    </div>
</body>
</html>
<script src="js/jquery-1.8.3.js"></script>
<script>
	$(function(){
		var arrUrl = ['imgs/1.jpg','imgs/2.jpg','imgs/3.jpg','imgs/4.jpg','imgs/5.jpg'];
		var arrText= ['图片一','图片二','图片三','图片四','图片五'];
		var title = $("#title");
		var bottom = $("#bottom");
		var img = $("img");
		for(var i=0;i<arrUrl.length;i++){
			var txt = $("<li><img src='"+arrUrl[i]+"'></li>")
			$("ul").append(txt)
		}
		
		var num = 0;
		var timer = null;
		$("li").each(function(i,ele){
			ele.onclick = function(){
				num = i;
				update()
			}
		})
		
		
		function update(){
			img.attr("src",arrUrl[num])
			bottom.html(arrText[num]);
		    title.html(num+1+'/'+arrUrl.length);
			$("li").eq(num).addClass("active");
			$("li").eq(num).siblings().removeClass("active")
		    
		}
		function autoPlay(){
		    update();
		    num++;
		    num%=arrUrl.length;//num = 1 % 5 =1 2 % 5 = 2 ..3..4 0
		}
		timer = setInterval(autoPlay,2000);
		$("img").mouseover(function(){
			clearInterval(timer);
		})
		$("img").mouseout(function(){
			timer = setInterval(autoPlay,2000);
		})
		
	})
</script>